<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Login Form Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3">

    <div th:fragment="loginform" class="d-flex flex-column justify-content-between m-auto"
         th:with="loginFormEnabled=${#cas.isTrue(#cas.theme('cas.login-form.enabled'))},
                loginFormViewable=${#cas.isLoginFormViewable(#vars)}">

        <div th:if="${delegatedAuthenticationProviderPrimary == null}">
            <div th:if="${!#strings.isEmpty(#cas.theme('cas.hero-banner.file'))}">
                <p>
                    <img id="heroimg"
                         th:title="${#strings.defaultString(#cas.theme('cas.theme.name'), 'CAS')}"
                         th:alt="${#strings.defaultString(#cas.theme('cas.theme.name'), 'CAS')}"
                         th:src="@{${#cas.theme('cas.hero-banner.file')}}"/>
                </p>
            </div>
            <div class="service-ui" th:replace="~{fragments/serviceui :: serviceUI}">
                <a href="fragments/serviceui.html">service ui fragment</a>
            </div>
        </div>

        <div class="form-wrapper">

            <form method="post" id="fm1" th:object="${credential}" action="login" onsubmit="loginFormSubmission();">
                <div id="login-form-controls" th:unless="${loginFormViewable or loginFormEnabled}">
                    <div id="loginErrorsPanel" class="alert alert-danger banner banner-danger banner-dismissible"
                         th:if="${#fields.hasErrors('*')}">
                        <p th:each="err : ${#fields.errors('*')}" th:utext="${err + ' '}">Example error</p>
                    </div>
                </div>

                <div id="login-form-controls" th:if="${loginFormViewable and loginFormEnabled}">
                    <div th:if="${existingSingleSignOnSessionAvailable}">
                        <i class="mdi mdi-alert-decagram fas fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;
                        <span id="existingSsoMsg" th:if="${registeredService}" class="mdc-button__label"
                              th:utext="#{screen.welcome.forcedsso(${existingSingleSignOnSessionPrincipal?.id},${registeredService.name})}"/>
                        <span id="existingSsoMsg" th:unless="${registeredService}" class="mdc-button__label"
                              th:utext="#{screen.welcome.forcedsso(${existingSingleSignOnSessionPrincipal?.id}, 'CAS')}"/>
                    </div>
                    <h2 th:unless="${existingSingleSignOnSessionAvailable}" class="text-center">
                        <i class="mdi mdi-login fas fa-shield-alt" aria-hidden="true"></i>
                        <span th:utext="#{screen.welcome.instructions}">Enter your Username and Password:</span>
                    </h2>

                    <div id="loginErrorsPanel" class="banner banner-danger alert alert-danger banner-dismissible"
                         th:if="${#fields.hasErrors('*')}" role="alert">
                        <h2 th:utext="#{screen.authentication.error.title}">Authentication Failure</h2>
                        <p th:each="err : ${#fields.errors('*')}" th:utext="${err + ' '}">Example error</p>
                    </div>
                    <section class="cas-field form-group my-3" id="usernameSection">
                        <label for="username"
                               class="mdc-text-field mdc-text-field--outlined control-label w-100">
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label"
                                          th:utext="#{screen.welcome.label.netid}">Username</span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                            <input class="mdc-text-field__input form-control" id="username"
                                   type="text"
                                   th:readonly="!${#cas.isLoginFormUsernameInputVisible(#vars)}"
                                   th:field="*{username}"
                                   th:accesskey="#{screen.welcome.label.netid.accesskey}"
                                   autocapitalize="none"
                                   spellcheck="false"
                                   aria-describedby="usernameValidationMessage"
                                   autocomplete="username" required/>
                        </label>

                        <div class="mdc-text-field-helper-line invalid-feedback">
                            <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
                                 aria-hidden="true">
                                <span id="usernameValidationMessage" th:utext="#{username.required}"></span>
                            </div>
                        </div>

                        <script type="text/javascript" th:inline="javascript">
                            /*<![CDATA[*/
                            let username = /*[[${#cas.getLoginFormUsername(#vars)}]]*/;
                            let disabled = /*[[${#cas.isLoginFormUsernameInputDisabled(#vars)}]]*/;

                            if (username != null && username !== "") {
                                $("#username").val(username);
                                if (disabled) {
                                    $("#usernameSection").hide();
                                }
                            }
                            /*]]>*/
                        </script>
                    </section>

                    <section class="cas-field form-group my-3 mdc-input-group form-group" id="passwordSection">
                        <div class="mdc-input-group-field mdc-input-group-field-append">
                            <label for="password"
                                   class="mdc-text-field caps-check mdc-text-field--outlined control-label mdc-text-field--with-trailing-icon control-label w-100">
                                    <span class="mdc-notched-outline">
                                        <span class="mdc-notched-outline__leading"></span>
                                        <span class="mdc-notched-outline__notch">
                                            <span class="mdc-floating-label"
                                                  th:utext="#{screen.welcome.label.password}">Password</span>
                                        </span>
                                        <span class="mdc-notched-outline__trailing"></span>
                                    </span>
                                <input class="mdc-text-field__input form-control pwd"
                                       type="password"
                                       id="password"
                                       required
                                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                                       th:field="*{password}"
                                       aria-describedby="passwordValidationMessage"
                                       autocomplete="current-password"/>
                                <button
                                        class="reveal-password mdc-button mdc-button--unelevated mdc-input-group-append mdc-icon-button btn btn-primary"
                                        type="button" th:title="#{screen.pm.password.toggle}" aria-pressed="false">
                                    <i class="mdi mdi-eye reveal-password-icon fas fa-eye" aria-hidden="true"></i>
                                    <span class="sr-only" th:utext="#{screen.pm.password.show}"></span>
                                </button>
                            </label>
                            <div class="mdc-text-field-helper-line invalid-feedback">
                                <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
                                     aria-hidden="true">
                                    <span id="passwordValidationMessage" th:utext="#{password.required}"></span>
                                </div>
                            </div>

                        </div>

                        <div class="mdc-text-field-helper-line invalid-feedback caps-warn">
                            <div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                                <span th:utext="#{screen.capslock.on}"/>
                            </div>
                        </div>
                    </section>

                    <section id="authnSourceSection" class="cas-field form-group my-3"
                             th:if="${availableAuthenticationHandlerNames != null}">
                        <div class="d-flex">
                            <div th:if="${availableAuthenticationHandlerNames.size() > 1}"
                                 class="mdc-select mdc-select--outlined mdc-select--required mdc-menu-surface--fullwidth authn-source">
                                <div class="mdc-select__anchor"
                                     role="button"
                                     aria-required="true"
                                     aria-haspopup="listbox"
                                     aria-expanded="false">
                                    <span class="mdc-line__ripple"></span>
                                    <span class="mdc-notched-outline">
                                        <span class="mdc-notched-outline__leading"></span>
                                        <span class="mdc-notched-outline__notch">
                                            <span id="outlined-select-label" class="mdc-floating-label"
                                                  th:utext="#{screen.welcome.label.source}">Source</span>
                                        </span>
                                        <span class="mdc-notched-outline__trailing"></span>
                                    </span>
                                    <span class="mdc-select__selected-text-container">
                                        <span class="mdc-select__selected-text"/>
                                    </span>
                                    <span class="mdc-select__dropdown-icon">
                                        <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5"
                                             focusable="false">
                                            <polygon class="mdc-select__dropdown-icon-inactive" stroke="none"
                                                     fill-rule="evenodd" points="7 10 12 15 17 10">
                                            </polygon>
                                            <polygon class="mdc-select__dropdown-icon-active" stroke="none"
                                                     fill-rule="evenodd" points="7 15 12 10 17 15">
                                            </polygon>
                                        </svg>
                                    </span>
                                    <span class="mdc-line-ripple"></span>
                                </div>

                                <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
                                    <ul class="mdc-list" role="listbox">
                                        <li th:each="handler,iter : ${availableAuthenticationHandlerNames}"
                                            class="mdc-list-item " th:id="${handler + '-authnSource'}"
                                            th:classappend="${iter.index == 0 ? 'mdc-list-item--selected' : ''}"
                                            th:data-value="${handler}" role="option">
                                            <span class="mdc-list-item__ripple"></span>
                                            <span class="mdc-list-item__text" th:utext="${handler}">Option</span>
                                        </li>
                                    </ul>
                                </div>
                                <input type="hidden" id="source" th:field="*{source}" name="source"/>
                            </div>

                            <span th:if="${availableAuthenticationHandlerNames.size() == 1}">
                                <input type="hidden" id="source" name="source"
                                       th:value="${availableAuthenticationHandlerNames.get(0)}"/>
                            </span>
                        </div>
                    </section>

                    <section class="cas-field form-group my-3">
                        <div th:each="entry: ${customLoginFormFields}">
                            <label class="mdc-text-field mdc-text-field--outlined control-label">
                                <input class="mdc-text-field__input form-control"
                                       th:id="${entry.key + '-customField'}" th:name="${entry.key + '-customField'}"
                                       type="text" th:field="*{customFields[__${entry.key}__]}"
                                       autocomplete="off"/>
                                <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                        <span class="mdc-floating-label"
                                              th:text="#{${entry.value.messageBundleKey}}">Label</span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                            </label>
                        </div>
                    </section>

                    <section class="cas-field form-check"
                             th:if="${#cas.isTrue(#cas.theme('cas.warn-on-redirect.enabled'))}">
                        <div class="mdc-form-field ">
                            <div th:replace="~{fragments/switchbutton :: switchbutton (id='warn', label='screen.welcome.label.warn')}"/>
                        </div>
                        <p/>
                    </section>

                    <section class="cas-field form-check"
                             th:if="${#cas.isTrue(#cas.theme('cas.public-workstation.enabled'))}">
                        <div class="mdc-form-field ">
                            <div th:replace="~{fragments/switchbutton :: switchbutton (id='publicWorkstation', label='screen.welcome.label.publicstation')}"/>
                        </div>
                        <p/>
                    </section>

                    <section class="cas-field form-check" th:if="${rememberMeAuthenticationEnabled}">
                        <div class="mdc-form-field ">
                            <div th:replace="~{fragments/switchbutton :: switchbutton (id='rememberMe', label='screen.rememberme.checkbox.title')}"/>
                        </div>
                        <p/>
                    </section>

                    <section class="cas-field">
                        <span th:if="${recaptchaLoginEnabled}">
                            <div th:replace="~{fragments/recaptcha :: recaptchaToken}"/>
                        </span>

                        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                        <input type="hidden" name="_eventId" value="submit"/>
                        <input type="hidden" name="geolocation"/>
                        <input type="hidden" name="deviceFingerprint"/>

                        <p th:if="${#strings.equalsIgnoreCase(httpRequestMethod, 'POST')}">
                            <span th:each="entry : ${httpRequestInitialPostParameters}" th:remove="tag">
                                <span th:each="entryValue : ${entry.value}" th:remove="tag">
                                    <input type="hidden" th:name="${entry.key}" th:value="${entryValue}"/>
                                </span>
                            </span>
                        </p>
                        <script
                                th:if="${#cas.isTrue(#cas.theme('cas.login-form.device-fingerprint.enabled'))}"
                                type="text/javascript">captureFingerprint();</script>
                    </section>

                    <p id="fieldsLegend"
                       class="text-muted mb-3"
                       th:if="${#cas.isTrue(#cas.theme('cas.login-form.legend.enabled'))}"
                       th:utext="#{screen.welcome.fields.legend}">
                        * Indicates required fields
                    </p>

                    <div id="termsOfUse"
                         class="text-muted mb-3"
                         th:if="${#cas.isTrue(#cas.theme('cas.login-form.terms-of-use.enabled'))}"
                         th:utext="#{screen.welcome.termsofuse}">
                        You agree to the terms of use by logging in.
                    </div>

                    <div th:replace="~{fragments/submitbutton :: submitButton (messageKey='screen.welcome.button.login')}"/>
                </div>
            </form>

            <div id="selectIdentityProvider"
                 th:if="${#cas.isTrue(delegatedAuthenticationDynamicProviderSelection) and loginFormViewable and loginFormEnabled}">
                <p>
                <form method="post" id="providerDiscoveryForm">
                    <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                    <input type="hidden" name="_eventId" value="discovery"/>
                    <span class="fa fa-unlock"></span>
                    <button th:id="selectProviderButton"
                            class="mdc-button mdc-button--raised"
                            onclick="$('#providerDiscoveryForm').submit();"
                            th:value="#{screen.pac4j.button.selectprovider}">
                        <span class="mdc-button__label" th:text="#{screen.pac4j.button.selectprovider}">Select</span>
                    </button>
                </form>
            </div>

            <div id="x509Login" th:if="${x509ClientAuthLoginEndpointUrl}">
                <span th:if="${loginFormViewable and loginFormEnabled}">
                    <hr class="my-4"/>
                    <script th:inline="javascript">
                        /*<![CDATA[*/
                        function x509login() {
                            let url =  /*[[${x509ClientAuthLoginEndpointUrl}]]*/;
                            url += window.location.search;
                            window.location.assign(url);
                        }

                        /*]]>*/
                    </script>
                    <a id="x509LoginLink" class="mdc-button mdc-button--raised btn btn-primary"
                       onclick="javascript:x509login();"
                       th:text="#{screen.welcome.button.loginx509}">X509 Login</a>
                </span>
            </div>

            <hr th:if="${loginFormViewable and loginFormEnabled}" class="my-4"/>

            <span id="webauthnLoginPanel" th:if="${webAuthnPrimaryAuthenticationEnabled}">
                <script type="text/javascript">
                    $("#webauthnLoginPanel").show();
                </script>

                <div th:replace="~{fragments/webAuthnLogin :: webAuthnLogin(primaryAuthentication=true)}"/>
                <hr class="my-4"/>
            </span>


            <div th:if="${loginFormViewable and loginFormEnabled}">
                <span th:remove="tag"
                      th:if="${#cas.isTrue(#cas.theme('cas.pm-links.enabled'))}">
                    <div th:replace="~{fragments/pmlinks :: pmlinks}"/>
                </span>
            </div>

            <script type="text/javascript" th:inline="javascript">
                /*<![CDATA[*/
                var i = /*[[@{#{screen.welcome.button.loginwip}}]]*/
                var j = /*[[@{#{screen.welcome.button.login}}]]*/
                    /*]]>*/
                    $(window).on("pageshow", function () {
                        $(":submit").prop("disabled", false);
                        $(":submit").attr("value", j);
                    });
                $(document).ready(function () {
                    $("#fm1").submit(function () {
                        $(":submit").attr("disabled", true);
                        $(":submit").attr("value", i);
                        return true;
                    });
                });
            </script>
        </div>

        <div th:if="${loginFormViewable and loginFormEnabled}">
            <div th:replace="~{fragments/loginsidebar :: loginsidebar}"/>
        </div>
    </div>
</main>
</body>

</html>
